<!--
author: 何其沆(pooky)
desc: Pool - Account Pool - Input Check
date: 2021-11-12
-->
<template>
  <div class="card">
    <a-textarea
      v-model:value="textareaValue"
      style="min-height: 40vh"
      placeholder="Please enter the email address to be checked, one email address occupies one line." />
    <div class="buttons">
      <a-button @click="handleReset">Reset</a-button>
      <a-button class="check" @click="handleCheck">Check</a-button>
    </div>

    <a-modal
      v-model:visible="visible"
      width="536px"
      title="Check Email"
      :footer="null"
      wrap-class-name="primary-modal"
      @cancel="handleCancel"
      @ok="handleCancel">
      <p class="modal-title">In Never Contact List:</p>
      <div v-for="(item, index) in checkEmailList" :key="index" class="modal-content">
        {{ item.email }}
      </div>
      <div class="modal-content">
        <span v-if="checkEmailList.length === 0">None</span>
      </div>
      <p class="modal-title" style="margin-top: 22px">Format is wrong:</p>
      <div v-for="(item, index) in errorEmailList" :key="index" class="modal-content">
        {{ item }}
      </div>
      <div class="modal-content">
        <span v-if="!errorEmailList[0]">None</span>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Pool from '@/api/pool.js'
const textareaValue = ref('')
const visible = ref(false)
const checkEmailList = ref([])
const errorEmailList = ref([])
/**
 * 重置
 */
const handleReset = () => {
  textareaValue.value = ''
}
/**
 * 检查
 */
const handleCheck = () => {
  const inputArr = textareaValue.value.split('\n')
  const doneArr = []
  errorEmailList.value = []
  inputArr.map(item => {
    return doneArr.push(item.trim())
  })
  doneArr.map(item => {
    const regExp =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/
    if (item.search(regExp) === -1) {
      if (errorEmailList.value.indexOf(item) === -1) {
        errorEmailList.value.push(item)
      }
    }
    return errorEmailList
  })
  Pool.inputCheck(doneArr).then(res => {
    if (res.code === 2000) {
      visible.value = true
      checkEmailList.value = res.data
    }
  })
}
/**
 * 关闭模态框
 */
const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="less">
.card {
  width: 100%;
  height: 100%;
  //height: 628px;
  overflow-y: auto;
  background-color: @white;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 1px 3px @shadow-color;
  padding: 24px;
  box-sizing: border-box;
  .buttons {
    text-align: center;
    margin-top: 24px;
    .check {
      border-color: @function;
      background-color: @function;
      color: @white;
      margin-left: 24px;
      &:focus,
      &:hover {
        background-color: @function-hover;
        border-color: @function-hover;
      }
    }
  }
}
.modal-title {
  font-size: 14px;
  color: @text-gray;
}
.modal-content {
  font-size: 16px;
  color: @text-black;
  line-height: 30px;
}
</style>
